
<template>
    <el-card class="box-card">
        <el-container>
            <el-header>

            </el-header>
            <el-main>
                <div class="search-sousuo">
                                        <!-- <input v-model="searchcon" /> -->
                                        <router-link to="/main/son" tag="button" >
                                        <el-button @click="sou">搜索</el-button>
                                         </router-link>
                     </div>

                <el-table :data="tableData.light.slice((page-1)*item,item*page)" border style="width: 100%"
                    @row-click="handle" v-model="shuju">
                    <el-table-column fixed prop="wl_eno" label="广告编号" width="70">
                    </el-table-column>
                    <el-table-column prop="wl_time" label="发布时间" width="140">
                    </el-table-column>
                    <el-table-column prop="wl_company" label="发布单位" width="110">
                    </el-table-column>
                    <el-table-column prop="wl_hwstyle" label="货物类型" width="90">
                    </el-table-column>
                    <el-table-column prop="wl_ton" label="货物数量" width="80">
                    </el-table-column>
                    <el-table-column prop="wl_source" label="货物来源地" width="230">
                    </el-table-column>
                    <el-table-column prop="wl_location" label="运送目的地" width="230">
                    </el-table-column>
                    <el-table-column prop="wl_car" label="车辆类型" width="120">
                    </el-table-column>
                    <el-table-column prop="wl_number" label="货物联系人" width="90">
                    </el-table-column>
                    <el-table-column prop="wl_telephone" label="联系电话" width="120">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogFormVisible()">编辑</el-button>
                            <el-button @click="handleDelete(scope.row.wl_eno)" type="text" size="small">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

        </el-container>

    </el-card>
</template>
        
<script>
import axios from 'axios'
import { reactive, ref } from 'vue'
import {useStore } from 'vuex'
export default {
    setup() {
        let tableData = reactive({ light: [] });
        let page = ref(1);
        let item = ref(8);
       


        const change = (val) => {
            page.value = val
        };

        axios({
            method: 'get',//请求类型
            url: 'http://localhost:8081/wuliu/cha'
        }).then(response => {
            console.log(response);
            tableData.light = response.data.data;
        })

       
        const shuju = () => {
            axios({
                method: "get",
                url: "http://localhost:8081/wliutb/findByNumber?word=" + `${searchcon.value}`,
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
              
                console.log(response.data.data)
                tableData.light = response.data.data;
            })
        }
     

        return {
            tableData,
            item,
            page,
            change,
            shuju
        }
    }

}
</script>
        
        
        
<style scoped>
.box-card {

    height: 600px;
}
.search-sousuo {
    position: relative;
    right: 80%;
}

.search-sousuo input {
    width: 150px;
    height: 24px;
    margin-right: 100px;
    color: black;


    /* display: flex;
    /**水平对齐 -靠左*/
    /* justify-content: flex-start;  */

}

/*子页面卡片* */
/* .el-card {
    margin-top: 5px;
    height: 62 0px;
    margin-left: 0px;

    border-radius: 30px;

} */

/**卡片中的整体布局 */
/* .el-container {
    padding: 2;
    margin: 0;



} */
</style>










